<template>
  <div class="router-list">
    <div
      v-for="(item, index) in navList"
      :key="index"
      class="router-item"
      :class="{ active: route.path === item.path }"
      @click="goToPage(item.path)"
    >
      <span class="router-text">{{ item.label }}</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router"

const props = defineProps({
  navList: {
    type: Array,
    required: true,
  },
})

const router = useRouter()
const route = useRoute()

const goToPage = (path) => {
  if (route.path !== path) router.push(path)
}
</script>

<style scoped>
.router-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 0;
  gap: 30px;
}

.router-item {
  position: relative;
  display: inline-block;
  width: 160px;
  height: 60px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.router-item:hover {
  transform: scale(1.05);
}

.router-text {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* 当前页高亮 */
.router-item.active .router-text {
  color: #a01212;
  font-weight: bold;
  position: relative;
}

/* 下划线 */
.router-item.active .router-text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background-color: #a01212;
  border-radius: 2px;
}
</style>
